<script setup>
import { ref, watch, computed } from 'vue'
import api from '@/api/index.js'
import MyTable from '@/components/MyTable/MyTable.vue'
import { getConsants } from '@/utils'

const emits = defineEmits(['close', 'init', 'reload'])
const props = defineProps({
  curRow: {
    type: Object,
    default: () => ({})
  },
  faMenuSltOpt: {
    type: Array,
    default: () => []
  }
})
// 弹窗标题
const title = '工单详情'
// 表单数据
const formData = ref({
  orderStatus: '',
  machineId: '',
  farmingArea: '',
  farmingAddress: '',
  pickDate: '',
  applyUserName: '',
  applyUserPhone: '',
  receiveUserId: '',
  serviceRemark: '',
  workType: ''
})

// 根据工单ID获取协助操作手列表
const xzczsList = ref([])
// 根据工单ID获取协助农机列表
const xznjList = ref([])

// 同步表格数据到表单数据内
watch(
  () => props.curRow,
  (val) => {
    // 按钮类型的父节点id为数组，需要特殊处理
    formData.value = { ...formData.value, ...val }
    if (val.orderId && show.value) {
      api.getFarInfo({ id: val.orderId }).then((res) => {
        const data = res.data
        formData.value = {
          ...formData.value,
          ...val,
          ...data,
          pickDate: [data.startTime, data.endTime]
        }
      })
      api.getXzczs({ orderId: val.orderId }).then((res) => {
        xzczsList.value = res.data
      })
      api.getXznj({ orderId: val.orderId }).then((res) => {
        xznjList.value = res.data
      })
    } else {
      formData.value = {
        orderStatus: '',
        machineId: '',
        farmingArea: '',
        farmingAddress: '',
        pickDate: '',
        applyUserName: '',
        applyUserPhone: '',
        receiveUserId: '',
        serviceRemark: ''
      }
      xzczsList.value = []
      xznjList.value = []
    }
  },
  { deep: true, immediate: true }
)
// 是否显示弹窗
const show = ref(false)
// 弹窗显示状态切换时触发
const afterOpenChange = (bool) => {
  if (!bool) {
    formData.value = {
      orderStatus: '',
      machineId: '',
      farmingArea: '',
      farmingAddress: '',
      pickDate: '',
      applyUserName: '',
      applyUserPhone: '',
      receiveUserId: '',
      serviceRemark: ''
    }
    xzczsList.value = []
    xznjList.value = []
    emits('close')
  }
}
// 打开弹窗
const open = () => {
  show.value = true
}
defineExpose({ open })
// 表格列配置
const columns = ref([
  { ellipsis: true, title: '农机名称', dataIndex: 'machineName', key: 'machineName' },
  { ellipsis: true, title: '耕作地址', dataIndex: 'farmingAddress', key: 'farmingAddress' },
  { ellipsis: true, title: '开始时间', dataIndex: 'startTime', key: 'startTime' },
  { ellipsis: true, title: '申请人姓名', dataIndex: 'applyUserName', key: 'applyUserName' },
  { ellipsis: true, title: '申请人电话', dataIndex: 'applyUserPhone', key: 'applyUserPhone' },
  { ellipsis: true, title: '接单人姓名', dataIndex: 'receiveUserName', key: 'receiveUserName' },
  { ellipsis: true, title: '接单人电话', dataIndex: 'receiveUserPhone', key: 'receiveUserPhone' }
])

const tableData = computed(() => {
  return formData.value.details
})

const xzczscolumns = ref([
  { ellipsis: true, title: '耕作手姓名', dataIndex: 'memName', key: 'memName' },
  { ellipsis: true, title: '实际耕作面积', dataIndex: 'farmArea', key: 'farmArea' },
  { ellipsis: true, title: '添加时间', dataIndex: 'createTime', key: 'createTime' }
])
const xznjcolumns = ref([
  { ellipsis: true, title: '农机名称', dataIndex: 'mchName', key: 'mchName' },
  { ellipsis: true, title: '添加时间', dataIndex: 'createTime', key: 'createTime' }
])
</script>

<template>
  <a-drawer
    :maskClosable="false"
    :closable="false"
    destroyOnClose
    v-model:open="show"
    class="custom-class"
    root-class-name="root-class-name"
    :title="title"
    placement="right"
    @after-open-change="afterOpenChange"
    width="900px"
  >
    <a-descriptions title="基础信息" bordered style="margin-bottom: 20px">
      <a-descriptions-item :span="2" label="工单编号">{{
        formData.orderNo ?? '--'
      }}</a-descriptions-item>
      <a-descriptions-item :span="1" label="工单状态">{{
        getConsants('order_status1', formData.orderStatus)
      }}</a-descriptions-item>
      <a-descriptions-item :span="1" label="耕作面积(亩)">{{
        formData.farmingArea ?? '--'
      }}</a-descriptions-item>
      <a-descriptions-item :span="1" label="作业类型">{{
        formData.workType ?? '--'
      }}</a-descriptions-item>
      <a-descriptions-item :span="1" label="耕作田块数">{{
        formData.numberPlots ?? '--'
      }}</a-descriptions-item>
      <a-descriptions-item label="备注">{{ formData.orderRemark ?? '--' }}</a-descriptions-item>
    </a-descriptions>
    <MyTable
      :dataSource="tableData"
      :columns="columns"
      :title="() => '工单详情'"
      :pagination="false"
      style="margin-bottom: 10px"
    />
    <MyTable
      :dataSource="xzczsList"
      :columns="xzczscolumns"
      :title="() => '协助操作手'"
      :pagination="false"
      style="margin-bottom: 10px"
    />
    <MyTable
      :dataSource="xznjList"
      :columns="xznjcolumns"
      :title="() => '协助农机'"
      :pagination="false"
    />
    <template #footer>
      <div style="display: flex; gap: 5px">
        <!-- <a-button type="primary" html-type="submit" @click="submit" :loading="submitLoading">提交</a-button> -->
        <a-button type="primary" ghost @click="show = false">关闭</a-button>
      </div>
    </template>
  </a-drawer>
</template>
